<template>
    <!-- 用户租借 -->
    <div class="box">
        <div class="tops">
            <div style=" width: 20%;height: 100%; font-size: 17px;margin: 0.75% 0 0 1%;">
                <i class="el-icon-s-home"></i>
                <span>首页</span>
                <span>></span>
                <span>用户租借管理</span>
            </div>
            <div style="float: right; margin: 0.5% 1% 0 0;">
                <el-button @click="deletes" type="primary" icon="el-icon-delete" size="small">删除</el-button>
                <el-button @click="refresh" type="primary" icon="el-icon-refresh" size="small">刷新</el-button>
            </div>
        </div>
        <el-container>
            <el-header>
                <el-form label-width="120px" v-model="searchModel">
                    <el-row type="flex" :gutter="0" justify="start" align="top">
                        <!-- <el-col :span="6">
                            <el-form-item label="流水号">
                                <el-input v-model="searchModel.ids" placeholder="请输入流水号" size="medium" clearable
                                    filterable ref="optionsCompany">
                                </el-input>
                            </el-form-item>
                        </el-col> -->
                        <el-col :span="6" style="margin: 0.3% 0 0 10%;">
                            <el-form-item label="自行车编号">
                                <el-input v-model="searchModel.bikeId" placeholder="请输入自行车编号" size="medium" clearable
                                    filterable ref="optionsCompany">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" style="margin: 0.3% 0 0 10%;">
                            <el-form-item label="用户姓名">
                                <el-input v-model="searchModel.name" placeholder="请输入用户姓名" size="medium" clearable
                                    filterable ref="optionsCompany">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="3" style="margin: 0.3% 0 0 10%;">
                            <el-button @click="queryForm" type="primary" size="small">查询</el-button>
                            <el-button @click="resetForm" size="small">重置</el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </el-header>
            <el-container>
                <el-aside>
                    <el-menu default-active="1-1" class="el-menu-vertical" @open="handleOpen" @close="handleClose"
                        @select="selects" :collapse="isCollapse">
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-setting"></i>
                                <span slot="title">租借状态</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="1-1">全部</el-menu-item>
                                <el-menu-item index="1-2">租借中</el-menu-item>
                                <el-menu-item index="1-3">已归还</el-menu-item>
                                <el-menu-item index="1-4">异常</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                        <el-submenu index="2">
                            <template slot="title">
                                <i class="el-icon-shopping-cart-full"></i>
                                <span slot="title">支付状态</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="2-1">全部</el-menu-item>
                                <el-menu-item index="2-2">待支付</el-menu-item>
                                <el-menu-item index="2-3">已支付</el-menu-item>
                                <el-menu-item index="2-4">未支付</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                    <div @click="shrinkMenu" class="shrink">
                        <i :class="isCollapse ? 'el-icon-arrow-right': 'el-icon-arrow-left'"></i>
                    </div>
                </el-aside>
                <el-main>
                    <el-table ref="multipleTable"
                        :data="tableData.slice((pageInfo.page-1)*pageInfo.pageSize,pageInfo.page*pageInfo.pageSize)"
                        tooltip-effect="dark" style="width: 100%" border height="93.5%"
                        :header-cell-style="{textAlign:'center'}" :cell-style="{textAlign:'center'}"
                        @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55" fixed="left" />
                        <!-- <el-table-column prop="ids" label="流水号" :show-overflow-tooltip="true" /> -->
                        <el-table-column type="index" width="50" label="序号" />
                        <el-table-column prop="bikeId" label="自行车编号" :show-overflow-tooltip="true" />
                        <el-table-column prop="id" label="用户卡编号" :show-overflow-tooltip="true" />
                        <el-table-column prop="name" label="用户姓名" :show-overflow-tooltip="true" />
                        <el-table-column prop="rentalType" label="租借状态" :show-overflow-tooltip="true" />
                        <el-table-column prop="startTime" label="租借时间" :show-overflow-tooltip="true" />
                        <el-table-column prop="rentalMoney" label="消费金额" :show-overflow-tooltip="true" />
                        <el-table-column prop="paymentStatus" label="支付状态" :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <span v-if="scope.row.paymentStatus == '未支付'" @click="handleClick(scope.row)"
                                    style="color:#ff404d ;cursor: pointer;">{{scope.row.paymentStatus}}</span>
                                <span v-else-if="scope.row.paymentStatus == '已支付'"
                                    style="color:#409EFF ;">{{scope.row.paymentStatus}}</span>
                                <span v-else>{{scope.row.paymentStatus}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="endTime" label="归还时间" :show-overflow-tooltip="true" />
                        <el-table-column label="操作" width="160" fixed="right">
                            <template slot-scope="scope">
                                <el-dropdown split-button size="mini">
                                    <span @click="handleClick(scope.row)" style="color:#409EFF ;">查看</span>
                                    <el-dropdown-menu slot="dropdown">
                                        <!-- <el-dropdown-item>
                                            <span @click="edit(scope.row)" style="color:#409EFF ;">编辑</span>
                                        </el-dropdown-item> -->
                                        <el-dropdown-item>
                                            <span @click="deleteone(scope.row)" style="color:#ff4040 ;">删除</span>
                                        </el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="this.pageInfo.page" :page-sizes="[10, 20, 30, 50]"
                        :page-size="this.pageInfo.pageSize" layout="->,total, sizes, prev, pager, next, jumper"
                        :total="this.pageInfo.total">
                    </el-pagination>
                    <!-- 查看弹窗框 -->
                    <el-dialog title="租借信息" :visible.sync="dialogVisible" width="50%" style="margin-top: 15vh;">
                        <el-descriptions title="" direction="horizontal" :column="2" border :contentStyle="rowCenter"
                            :labelStyle="rowCenter">
                            <el-descriptions-item label="流水号">{{formData.ids}}</el-descriptions-item>
                            <el-descriptions-item label="自行车编号">{{formData.bikeId}}</el-descriptions-item>
                            <el-descriptions-item label="用户卡编号">{{formData.id}}</el-descriptions-item>
                            <el-descriptions-item label="用户姓名">{{formData.name}}</el-descriptions-item>
                            <el-descriptions-item label="租借状态">{{formData.rentalType}}</el-descriptions-item>
                            <el-descriptions-item label="消费金额">{{formData.rentalMoney}}</el-descriptions-item>
                            <el-descriptions-item label="支付状态">{{formData.paymentStatus}}</el-descriptions-item>
                            <el-descriptions-item label="租借时间">{{formData.startTime}}</el-descriptions-item>
                            <el-descriptions-item label="归还时间">{{formData.endTime}}</el-descriptions-item>
                        </el-descriptions>
                        <div slot="footer" class="dialog-footer">
                            <el-button v-if="formData.paymentStatus == '未支付'" type="warning"
                                @click="dialogVisible3 = true" size="small">提醒</el-button>
                            <el-button type="primary" @click="dialogVisible = false" size="small">关闭</el-button>
                        </div>
                    </el-dialog>
                    <!-- 提醒用户支付 -->
                    <el-dialog title="提示！" :visible.sync="dialogVisible3" width="20%" style="margin-top: 30vh;">
                        <span>是否提醒用户支付费用</span>
                        <div slot="footer" class="dialog-footer">
                            <el-button type="primary" @click="dialogVisible3 = false" size="small">取消</el-button>
                            <el-button type="primary" @click="notice" size="small">确定</el-button>
                        </div>
                    </el-dialog>
                    <!-- 编辑弹窗框 -->
                    <el-dialog title="租借信息" :visible.sync="dialogVisible2" width="50%" style="margin-top: 8vh;">
                        <el-descriptions title="" direction="horizontal" :column="2" border :contentStyle="rowCenter"
                            :labelStyle="rowCenter">
                            <el-descriptions-item label="流水号">
                                <el-input v-model="formData.ids" autocomplete="off"></el-input>
                            </el-descriptions-item>
                            <el-descriptions-item label="租借状态">
                                <el-select v-model="formData.rentalType" placeholder="请选择">
                                    <el-option label="租借中" value="shenfenzheng"></el-option>
                                    <el-option label="已归还" value="huzhao"></el-option>
                                    <el-option label="异常" value="huzhao"></el-option>
                                </el-select>
                            </el-descriptions-item>

                            <el-descriptions-item label="用户卡编号">
                                <el-input v-model="formData.id" autocomplete="off"></el-input>
                            </el-descriptions-item>

                            <el-descriptions-item label="租借时间">
                                <el-date-picker v-model="formData.startTime" value-format="yyyy-MM-dd" type="date"
                                    placeholder="注册日期">
                                </el-date-picker>
                            </el-descriptions-item>
                            <el-descriptions-item label="用户姓名">
                                <el-input v-model="formData.name" autocomplete="off"></el-input>
                            </el-descriptions-item>

                            <el-descriptions-item label="支付状态">
                                <el-select v-model="formData.paymentStatus" placeholder="请选择">
                                    <el-option label="待支付" value="shenfenzheng"></el-option>
                                    <el-option label="已支付" value="shenfenzheng"></el-option>
                                    <el-option label="未支付" value="huzhao"></el-option>
                                </el-select>
                            </el-descriptions-item>
                            <el-descriptions-item label="自行车编号">
                                <el-input v-model="formData.bikeId" autocomplete="off"></el-input>
                            </el-descriptions-item>
                            <el-descriptions-item label="归还时间">
                                <el-date-picker v-model="formData.endTime" value-format="yyyy-MM-dd" type="date"
                                    placeholder="注册日期">
                                </el-date-picker>
                            </el-descriptions-item>
                            <el-descriptions-item label="消费金额">
                                <el-input v-model="formData.rentalMoney" autocomplete="off"></el-input>
                            </el-descriptions-item>
                        </el-descriptions>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisible2 = false">取 消</el-button>
                            <el-button type="primary" @click="revise">确 定</el-button>
                        </div>
                    </el-dialog>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script>
    import { getrecordAPI, deleterecordAPI, userspayAPI } from "@/api";
    export default {
        data() {
            return {
                users: {
                    id: '',
                    notpay: 1
                },
                idData: [],
                rowCenter: {
                    "text-align": "center"
                },
                presentLabelWidth: '100px',
                formLabelWidth: '80px',
                formData: {
                    paymentStatus: '',
                    id: '',
                    ids: '',
                    bikeId: '',
                    name: '',
                    startTime: '',
                    endTime: '',
                    rentalMoney: '',
                    rentalType: '',
                },
                dialogVisible4: false,
                dialogVisible3: false,
                dialogVisible2: false,
                dialogVisible: false,
                isCollapse: false,
                searchModel: { ids: '', bikeId: '', name: '' },
                personName: '',
                pageInfo: { page: 1, pageSize: 10, total: 0 },
                tableData: [],
            }
        },
        created() {
            this.getRecord()
        },
        methods: {
            async showusers() {
                const { data: res } = await userspayAPI(this.users);
                if (res.status == 0) {
                    this.$message({
                        showClose: true,
                        message: '提醒成功!',
                        type: 'success',
                        offset: 60
                    });
                }
                console.log(res)
            },
            //删除单个
            async deleteone(row) {
                const { data: res } = await deleterecordAPI(row.ids);
                if (res.status == 0) {
                    this.$message({
                        showClose: true,
                        message: '删除成功!',
                        type: 'success',
                        offset: 60
                    });
                    this.getRecord()
                } else {
                    this.$message.error('删除失败!');
                }
            },
            //批量删除
            async deletes() {
                if (this.idData.length == 0) {
                    this.$message({
                        showClose: true,
                        message: '请选择要删除的数据!',
                        type: 'warning',
                        offset: 60
                    });
                } else {
                    let ids = this.idData.join(',')
                    const { data: res } = await deleterecordAPI(ids);
                    if (res.status == 0) {
                        this.$message({
                            showClose: true,
                            message: '删除成功!',
                            type: 'success',
                            offset: 60
                        });
                        this.getRecord()
                    } else {
                        this.$message.error('删除失败!');
                    }
                }
            },
            //刷新
            async refresh() {
                const { data: res } = await getrecordAPI()
                if (res.status === 0) {
                    this.tableData = res.data
                    this.pageInfo.total = this.tableData.length
                    this.$message({
                        showClose: true,
                        message: '刷新成功!',
                        type: 'success',
                        offset: 60
                    });
                } else {
                    this.$message.error('刷新失败!');
                }
            },
            //所有租借记录
            async getRecord() {
                const { data: res } = await getrecordAPI()
                if (res.status === 0) {
                    this.tableData = res.data
                    this.pageInfo.total = res.data.length
                }
            },
            // 租借信息修改确定
            revise() {
                this.dialogVisible2 = false
            },
            // 提醒用户支付
            notice() {
                this.showusers()
                this.dialogVisible3 = false
                this.dialogVisible = false
            },
            shrinkMenu() {
                this.isCollapse = !this.isCollapse;
            },
            handleOpen(key, keyPath) {
            },
            handleClose(key, keyPath) {
            },
            //编辑
            // edit(row) {
            //     this.formData.id = row.id
            //     this.formData.ids = row.ids
            //     this.formData.cart = row.cart
            //     this.formData.bikeId = row.bikeId
            //     this.formData.name = row.name
            //     this.formData.startTime = row.startTime
            //     this.formData.endTime = row.endTime
            //     this.formData.rentalMoney = row.rentalMoney
            //     this.formData.rentalType = row.rentalType
            //     this.formData.paymentStatus = row.paymentStatus
            //     this.dialogVisible2 = true
            // },
            //查看
            handleClick(row) {
                this.users.id = row.id
                this.formData.ids = row.ids
                this.formData.id = row.id
                this.formData.cart = row.cart
                this.formData.bikeId = row.bikeId
                this.formData.name = row.name
                this.formData.startTime = row.startTime
                this.formData.endTime = row.endTime
                this.formData.rentalMoney = row.rentalMoney
                this.formData.rentalType = row.rentalType
                this.formData.paymentStatus = row.paymentStatus
                this.dialogVisible = true
            },
            async selects(key, keyPath) {
                this.tableData = []
                const { data: res } = await getrecordAPI();
                if (res.status == 0) {
                    if (key == '1-1' || key == '2-1') {//全部
                        this.tableData = res.data
                        this.pageInfo.total = res.data.length
                    } else if (key == '1-2') {//租借中
                        res.data.forEach(item => {
                            if (item.rentalType == '租借中') {
                                this.tableData.push(item)
                            }
                        });
                        this.pageInfo.total = this.tableData.length
                    } else if (key == '1-3') {//已归还
                        res.data.forEach(item => {
                            if (item.rentalType == '已归还') {
                                this.tableData.push(item)
                            }
                        });
                        this.pageInfo.total = this.tableData.length
                    } else if (key == '1-4') {//异常
                        res.data.forEach(item => {
                            if (item.rentalType == '异常') {
                                this.tableData.push(item)
                            }
                        });
                        this.pageInfo.total = this.tableData.length
                    } else if (key == '2-2') {//待支付
                        res.data.forEach(item => {
                            if (item.paymentStatus == '待支付') {
                                this.tableData.push(item)
                            }
                        });
                        this.pageInfo.total = this.tableData.length
                    } else if (key == '2-3') {//已支付
                        res.data.forEach(item => {
                            if (item.paymentStatus == '已支付') {
                                this.tableData.push(item)
                            }
                        });
                        this.pageInfo.total = this.tableData.length
                    } else if (key == '2-4') {//未支付
                        res.data.forEach(item => {
                            if (item.paymentStatus == '未支付') {
                                this.tableData.push(item)
                            }
                        });
                        this.pageInfo.total = this.tableData.length
                    }
                }
            },
            //重置
            resetForm() {
                this.searchModel.name = ''
                this.searchModel.bikeId = ''
                this.getRecord()
            },
            //查询
            async queryForm() {
                this.tableData = []
                const { data: res } = await getrecordAPI();
                if (res.status == 0) {
                    if (this.searchModel.name == '' && this.searchModel.bikeId !== '') {
                        res.data.forEach(item => {
                            if (item.bikeId == this.searchModel.bikeId) {
                                this.tableData.push(item)
                            }
                        });
                        this.pageInfo.total = this.tableData.length
                    } else if (this.searchModel.name !== '' && this.searchModel.bikeId == '') {
                        res.data.forEach(item => {
                            if (item.name == this.searchModel.name) {
                                this.tableData.push(item)
                            }
                        });
                        this.pageInfo.total = this.tableData.length
                    } else if (this.searchModel.name !== '' && this.searchModel.bikeId !== '') {
                        res.data.forEach(item => {
                            if (item.name == this.searchModel.name && item.id == this.searchModel.bikeId) {
                                this.tableData.push(item)
                            }
                        });
                        this.pageInfo.total = this.tableData.length
                    } else {
                        this.tableData = res.data
                        this.pageInfo.total = res.data.length
                    }
                }
            },
            handleSelectionChange(val) {
                this.idData = []
                val.forEach(item => {
                    this.idData.push(item.ids)
                })
            },
            handleSizeChange(val) {
                this.pageInfo.pageSize = val
                this.pageInfo.page = 1
            },
            handleCurrentChange(val) {
                this.pageInfo.page = val
            }
        },
    }
</script>
<style scoped>
    /deep/ .el-dialog__footer {
        padding: 10px;
    }

    /deep/ .el-dialog__body {
        padding: 0px 20px;
    }

    .tops>div {
        display: inline-block;
    }

    .box>.el-container {
        padding: 20px !important;
        width: 100% !important;
        height: 93% !important;
    }

    .tops {
        width: 100%;
        height: 7%;
        background-color: #fff;
    }

    .box {
        height: 100%;
        width: 100%;
    }

    .el-menu-item {
        padding-left: 60px !important;
    }

    /deep/ .el-menu-item,
    .el-submenu__title {
        height: 30px !important;
        line-height: 30px !important;
        list-style: none;
    }

    /deep/ .el-menu-item-group__title {
        padding: 0 !important;
    }

    .el-menu {
        height: 100%;
        border-right-width: 0;
    }

    .el-menu-vertical:not(.el-menu--collapse) {
        width: 200px;
    }

    .shrink {
        position: absolute;
        top: 50%;
        right: -25px;
        transform: translateY(-50%);
        width: 23px;
        height: 35px;
        border: 1px solid #b3c0d1;
        background: #b3c0d1;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 3px;
        cursor: pointer;
        /* z-index: 9999; */
    }

    .el-aside {
        /* width: 15% !important;
        height: 98%;
        background-color: #fff;*/
        margin: 25px 0 0 0 !important;
        /* 左侧不设置宽度 */
        overflow: visible !important;
        width: auto !important;
        height: 95.6%;
        background: #d3dce6;
        position: relative;
    }

    /* .el-card__body, */
    .el-main {
        padding: 25px 0 0 25px !important;
        height: 100%;
        /* flex关键代码，让右侧占满剩余宽度 */
        flex: 1;
        background: #e9eef3;
        box-sizing: border-box;
    }

    .el-header {
        padding-top: 10px;

        background-color: #fff;
    }

    /* .el-menu--collapse {
        width: 1px !important;
    } */
    .el-container>.el-container {
        height: 80%;
    }

    .el-pagination {
        background-color: white !important;
        /* margin-top: 1% !important; */
        /* float: right; */
    }
</style>